<!-- 在script 标签上使用setup，可以不用再使用return的写法了 -->
<!-- 其中 setup 标记的 script 必须是单独的，不能和export等其他共用 -->
<!-- 可以使用  npm i vite-plugin-vue-setup-extend -D 插件替换下面的写法，直接将组件名称定义写到script的name属性上 -->
<!--<script lang="ts">
export default {
  name: 'Person',
}
</script>-->

<!-- 可以使用  npm i vite-plugin-vue-setup-extend -D 插件替换下面的写法，直接将组件名称定义写到script的name属性上 -->
<!-- 如果没有定义组件名称，没有给script写name定义组件名称的话，默认就是组件的名称。 -->
<script setup lang="ts" name="Person">
// 数据
import { ref } from 'vue'
import { nanoid } from 'nanoid'

let car = ref({
  brand: '奔驰',
  price: 100,
})

let games = ref([
  {
    id: nanoid(),
    name: '王者荣耀',
  },
  {
    id: nanoid(),
    name: '英雄联盟',
  },
  {
    id: nanoid(),
    name: '金铲铲',
  },
])

// 方法
function addGames() {
  games.value.splice(0, 1, {
    id: nanoid(),
    name: '流星蝴蝶剑',
  })
}
</script>

<template>
  <div class="person">
    <h1>汽车名称：{{ car.brand }}</h1>
    <h1>汽车价格：{{ car.price }} 万</h1>

    <button @click="car.brand += '!'">修改汽车名称</button>
    <button @click="car.price += 10">修改汽车价格</button>

    <br />
    <h1>我喜欢的游戏:</h1>
    <ul>
      <li v-for="game of games" :key="game.id">{{ game.name }}</li>
    </ul>
    <button @click="addGames()">修改第一个游戏</button>
  </div>
</template>

<style scoped>
.person {
  background-color: #dab649;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 0 10px;
}
</style>
